<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入
* mapbox-gl-enhance (https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1-12/mapbox-gl-enhance.js)
* Turf (https://github.com/Turfjs/turf/)
* proj4js (https://github.com/proj4js/proj4js)
* video.js (https://github.com/videojs/video.js)
* opencv (https://github.com/opencv/opencv)
*********************************************************************-->
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title data-i18n="resources.title_videoLayer"></title>
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
    <script
      type="text/javascript"
      include="mapbox-gl-enhance,proj4,turf,videojs,opencv"
      src="../../dist/mapboxgl/include-mapboxgl.js"
    ></script>
    <script type="text/javascript">
      var map,
        videoLayer;
      var attribution =
        "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
        " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
        " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
      var dataUrl = 'https://iserver.supermap.io/iserver/services/data-video/rest/data';
      var datasourceName = 'VideoData';
      var datasetName = 'DJI_0937_2';
      var map = new mapboxgl.Map({
        container: 'map',
        renderWorldCopies: false,
        style: {
          version: 8,
          sources: {
            'raster-tiles': {
              type: 'raster',
              tileSize: 256,
              tiles: [
              'https://t4.tianditu.gov.cn/img_w/wmts?service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}&tk=1d109683f4d84198e37a38c442d68311'
              ]
            }
          },
          layers: [
            {
              id: 'simple-tiles',
              type: 'raster',
              source: 'raster-tiles',
              minzoom: 0,
              maxzoom: 22
            }
          ]
        },
        center: [104.09380813215542, 30.529008613830903],
        zoom: 14
      });
      map.addControl(new mapboxgl.NavigationControl(), 'top-left');
      map.addControl(new mapboxgl.supermap.LogoControl({ link: 'https://iclient.supermap.io' }), 'bottom-right');
      function query() {
        var sqlParam = new mapboxgl.supermap.GetFeaturesBySQLParameters({
          queryParameter: {
            name: datasetName + '@' + datasourceName,
            attributeFilter: 'SMID > 0'
          },
          datasetNames: [datasourceName + ':' + datasetName]
        });

        new mapboxgl.supermap.FeatureService(dataUrl).getFeaturesBySQL(sqlParam).then(function (serviceResult) {
          let coordinates = [];
          turf.featureEach(serviceResult.result.features, function (currentFeature, featureIndex) {
            currentFeature.geometry.coordinates[0][0].forEach((coord) => {
              const res = proj4('EPSG:3857', 'EPSG:4326', coord);
              coordinates.push(res);
            });
          });
          var url = serviceResult.result.features.features[0].properties.address;
          var cameraLocation = serviceResult.result.features.features[0].properties.cameraLocation;
          var calibrationModel = serviceResult.result.features.features[0].properties.videoParameters.videoParameterList[0].calibrationModel;
          var clipRegionPoints = serviceResult.result.features.features[0].properties.videoParameters.videoParameterList[0].clipRegion.points;
          videoLayer = new mapboxgl.supermap.VideoLayer({
            url,
            extent: [coordinates[3], coordinates[2], coordinates[1], coordinates[0]],
            videoParameters: {
              fovX: calibrationModel.fovX,
              fovY: calibrationModel.fovY,
              centerX: calibrationModel.centerX,
              centerY: calibrationModel.centerY,
              pitch:cameraLocation.cameraPitch,
              roll: cameraLocation.cameraRoll,
              yaw: cameraLocation.cameraYaw,
              x: cameraLocation.cameraX,
              y: cameraLocation.cameraY,
              z: cameraLocation.cameraZ
            },
            clipRegion: [
              [clipRegionPoints[0].x, clipRegionPoints[0].y],
              [clipRegionPoints[1].x, clipRegionPoints[1].y],
              [clipRegionPoints[2].x, clipRegionPoints[2].y],
              [clipRegionPoints[3].x, clipRegionPoints[3].y]
            ]
          });
          map.addLayer(videoLayer);
        });
      }
      map.on('load', function () {
        query();
      });
    </script>
  </body>
</html>
